<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 960px;
        background: #fff;
        max-width: 1024px;
        margin: 0 auto;
    }
    #main2 {
        margin-top: -120px;
    }
    .one,
    .two {
        position: relative;
    }
    .one .title {
        position: absolute;
        top: 120px;
        font-size: 16px;
        font-weight: 400;
        color: #585858;
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg);
    }
    .two .title {
        position: absolute;
        top: 120px;
        left: 10px;
        font-size: 16px;
        font-weight: 700;
        color: #585858;
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg);
    }
    .one .sub {
        position: absolute;
        bottom: 76px;
        font-style: italic;
        font-size: 12px;
        z-index: 2;
        letter-spacing: 1px;
    }
    .one .sub1 {
        left: 300px;
    }
    .one .sub2 {
        left: 500px;
    }
    </style>
		<script type="text/javascript" src="/echarts.js" ></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	    <div class="box">
	        <div class="one">
	            <p class="title">交流干扰数据</p>
	            <p class="sub sub1">低风险</p>
	            <p class="sub sub2">高风险</p>
	            <div id="main1" style="height:290px"></div>
	        </div>
	        <div class="two">
	            <p class="title">通断电电位</p>
	            <div id="main2" style="height:260px;margin-top: 100px;"></div>
	        </div>
	    </div>
		<script type="text/javascript">
			var myChart1 = echarts.init(document.getElementById("main1"));
			var myChart2 = echarts.init(document.getElementById("main2"));
			var xAxisData = ['A-001','A-002','A-003','A-004','A-005'];

               

                var option1 = {
                	 title: {
			            text: '在此图表中滚动鼠标'
			        },
                    color: '#585858',
                    tooltip : {trigger: 'axis'},
                    legend: {
                        x: 'right',
                        textStyle: {fontSize: 18,fontWeight: 400},
                        data:['交流电压','交流电流密度']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: false},
                            dataView : {show: false, readOnly: false},
                            magicType : {show: false, type: ['line', 'stack', 'tiled']},
                            restore : {show: false},
                            saveAsImage : {show: false}
                        }
                    },
                    grid: {borderColor: '#fff'},
                    xAxis : [
                        {
                            type : 'category',
                            axisLine:{show: false},
                            axisLabel: {show: false},
                            splitArea: {
                                show: true,
                                areaStyle:{color: ['#ffffff','#ffffcd','#ffcdcd','#ffcdcd','#ffffff']}
                            },
                            splitLine: {show: false},
                            data : xAxisData,

                    }],
                    yAxis : [
                        {
                            type : 'value',
                            min: 0,
                            max: 5,
                            splitNumber: 5,
                            scale:true,
                            splitArea : {show : true},
                            textStyle: {color: '#fff'},
                            splitArea : {show : false},
                            axisLine:{lineStyle:{color:'#fff',}},
                        }
                    ],
                    series : [
                        {
                            name:'交流电压',
                            type:'line',
                            smooth:false,
                            symbol: 'circle',
                            data:[2.4,4.4,1.8,2.8,3],
                            lineStyle:{color:'#ee7b31'},
                            itemStyle : {normal : {color:'#ee7b31'}
                           }
                       },
                       {
                           name:'交流电流密度',
                           type:'line',
                           smooth:false,
                           symbol: 'circle',
                           data:[4.2,2.3,3.5,4.5,2],
                           lineStyle:{color:'#5a9ad4'},
                           itemStyle : {normal : {color:'#5a9ad4'}}
                      },
                    ],

                }



            var option2 = {
            	 	title: {
			            text: '此图表对应上面的一起变化'
			        },
                    tooltip : {trigger: 'axis'},
                    legend: {
                        x: 'right',
                        y: 35,
                        show: true,
                        textStyle: {fontSize: 18,fontWeight: 400,},
                        data:['通电电位','断点电位', '土壤电阻率']
                    },
                    toolbox: {
                        y : -30,
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    grid: {borderColor: '#fff'},
                    xAxis : [
                        {
                            show: true,
                            type : 'category',
                            axisLine:{lineStyle:{color:'#fff'}},
                            splitArea: {
                                show: true,
                                areaStyle:{color: ['#ffffff','#ffffcd','#ffcdcd','#ffcdcd','#ffffff']}
                            },
                            data : xAxisData,
                    }],
                    yAxis : [
                        {
                            type : 'value',
                            min: 0,
                            max: 8,
                            splitNumber: 4,
                            scale:true,
                            splitArea : {show : false},
                            axisLine:{lineStyle:{color:'#fff'}
                            },
                        }
                    ],
                    axis: {data : xAxisData},
                    series : [
                        {
                            name:'通电电位',
                            type:'line',
                            symbol: 'circle',
                            smooth:false,
                            data:[2,5,1,3,4],
                            lineStyle:{color:'#5a9ad4'},
                            itemStyle: {normal: { color:'#5a9ad4'}},
                       },
                       {
                           name:'断点电位',
                           type:'line',
                           symbol: 'circle',
                           smooth:false,
                           data:[4.2,2.2,1.8,2.8,3],
                           lineStyle:{color:'#ee7b31'},
                           itemStyle: {normal: {color:'#ee7b31'}},
                      },{
                          name:'土壤电阻率',
                          type:'line',
                          symbol: 'circle',
                          smooth:false,
                          data:[2,3,4,5,6],
                          lineStyle:{color:'#a7a7a7'},
                          itemStyle: {normal: {color:'#a7a7a7'},
                         },
                      }
                    ]
                }
            // 为echarts对象加载数据
            myChart1.setOption(option1);
            myChart2.setOption(option2);
            //联动配置
            echarts.connect([myChart1,myChart2])
            
		</script>
	</body>
</html>
